<script setup lang="ts">
import { computed, ref, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue'
import { useAppStore } from '@/stores/app'
import * as Icons from '@ant-design/icons-vue'

defineOptions({
  name: 'Sidebar'
})

const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const appStore = useAppStore()

// 计算侧边栏是否折叠
const isCollapse = computed(() => appStore.sidebar.collapsed)

// 切换侧边栏折叠状态
const toggleSidebar = () => {
  appStore.toggleSidebar()
}

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 选中的菜单项
const selectedKeys = computed(() => {
  return [activeMenu.value]
})

// 处理菜单点击
const handleMenuClick = (key: string | number) => {
  router.push(String(key))
}

// 渲染图标
const renderIcon = (iconName: string) => {
  if (!iconName) return null
  const Icon = (Icons as any)[iconName]
  return Icon ? h(Icon) : null
}

// 模拟菜单数据
const menuList = ref([
  {
    path: '/dashboard',
    name: 'Dashboard',
    meta: { title: t('menu.dashboard'), icon: 'DashboardOutlined' }
  },
  {
    path: '/system',
    name: 'System',
    meta: { title: t('menu.system.title'), icon: 'SettingOutlined' },
    children: [
      {
        path: '/system/user',
        name: 'User',
        meta: { title: t('menu.system.user'), icon: 'UserOutlined' }
      },
      {
        path: '/system/role',
        name: 'Role',
        meta: { title: t('menu.system.role'), icon: 'TeamOutlined' }
      },
      {
        path: '/system/menu',
        name: 'Menu',
        meta: { title: t('menu.system.menu'), icon: 'MenuOutlined' }
      },
      {
        path: '/system/dept',
        name: 'Dept',
        meta: { title: t('menu.system.dept'), icon: 'ApartmentOutlined' }
      }
    ]
  },
  {
    path: '/config',
    name: 'Config',
    meta: { title: t('menu.config.title'), icon: 'ToolOutlined' },
    children: [
      {
        path: '/config/dict',
        name: 'Dict',
        meta: { title: t('menu.config.dict'), icon: 'BookOutlined' }
      },
      {
        path: '/config/setting',
        name: 'Setting',
        meta: { title: t('menu.config.setting'), icon: 'SettingOutlined' }
      }
    ]
  },
  {
    path: '/file/index',
    name: 'File',
    meta: { title: t('menu.file.title'), icon: 'FileOutlined' }
  },
  {
    path: '/notification',
    name: 'Notification',
    meta: { title: t('menu.notification.title'), icon: 'NotificationOutlined' }
  }
])
</script>

<template>
  <div class="sidebar-container" :class="{ 'is-collapse': isCollapse }">
    <div class="logo-container">
      <router-link to="/" class="logo-link">
        <img src="@/assets/images/common/logo.svg" alt="logo" class="logo-img" />
        <h1 class="logo-title" v-if="!isCollapse">{{ t('common.welcome') }}</h1>
      </router-link>
    </div>
    
    <a-menu
      :selectedKeys="selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="isCollapse"
      @click="({ key }) => handleMenuClick(key)"
    >
      <template v-for="menu in menuList" :key="menu.path">
        <!-- 有子菜单 -->
        <template v-if="menu.children && menu.children.length">
          <a-sub-menu :key="menu.path">
            <template #icon>
              <component :is="renderIcon(menu.meta.icon)" />
            </template>
            <template #title>{{ menu.meta.title }}</template>
            
            <a-menu-item v-for="child in menu.children" :key="child.path">
              <template #icon>
                <component :is="renderIcon(child.meta.icon)" />
              </template>
              <span>{{ child.meta.title }}</span>
            </a-menu-item>
          </a-sub-menu>
        </template>
        
        <!-- 无子菜单 -->
        <template v-else>
          <a-menu-item :key="menu.path">
            <template #icon>
              <component :is="renderIcon(menu.meta.icon)" />
            </template>
            <span>{{ menu.meta.title }}</span>
          </a-menu-item>
        </template>
      </template>
    </a-menu>
    
    <div class="sidebar-toggle" @click="toggleSidebar">
      <MenuFoldOutlined v-if="!isCollapse" />
      <MenuUnfoldOutlined v-else />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sidebar-container {
  height: 100%;
  background-color: #001529;
  transition: width $transition-duration;
  width: $sidebar-width;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  
  &.is-collapse {
    width: $sidebar-collapsed-width;
  }
  
  .logo-container {
    height: $header-height;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .logo-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      
      .logo-img {
        width: 32px;
        height: 32px;
      }
      
      .logo-title {
        margin: 0 0 0 12px;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
  
  .sidebar-toggle {
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}
</style> 